<template>

    <div>

        <el-form :inline="true" :model="formInline" class="demo-form-inline">


            <el-form-item label="学院" v-if="role=='学生处'">
                <!-- <el-input v-model="formInline.status" placeholder="请输入请假状态"/> -->
                <el-select v-model="formInline.dname" clearable placeholder="请选择学院">
                    <el-option
                            v-for="item in depts"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="学号">
                <el-input v-model="formInline.studentNumber" placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formInline.studentName" placeholder="请输入学生姓名"/>
            </el-form-item>
            <el-form-item label="开始时间">
                <!-- <el-input v-model="formInline.startTime" placeholder="请输入教开始时间"/> -->
                <el-date-picker
                        v-model="formInline.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择请假开始时间"
                        align="right"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <!-- <el-input v-model="formInline.endTime" placeholder="请输入结束时间"/> -->
                <el-date-picker
                        v-model="formInline.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择请假结束时间"
                        align="right"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <!-- <el-input v-model="formInline.status" placeholder="请输入请假状态"/> -->
                <el-select v-model="formInline.status" clearable placeholder="请选择请假状态">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="success"
                        icon="el-icon-check"
                        @click="handleBatchApproval"
                        v-if="role!=='辅导员'"
                >批量审批
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        icon="el-icon-download"
                        @click="output"
                        v-if="role=='学生处'"
                >导出数据
                </el-button>
            </el-col>

        </el-row>
        <br/>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >

            <el-table-column type="selection" width="40"
                             :selectable="function (row,index){return canChose(row,index)}"/>

            <el-table-column
                    fixed
                    type="index"
                    label="编号"
                    width="56"
            >
            </el-table-column>
            <el-table-column
                    prop="studentNumber"
                    label="学号"
                    width="100"
            >
            </el-table-column>

            <el-table-column
                    prop="studentName"
                    label="姓名"
            >
            </el-table-column>

            <el-table-column
                    prop="grade"
                    label="年级"
                    width="60"
            >
            </el-table-column>

            <el-table-column
                    prop="clazzName"
                    label="班级"
            >
            </el-table-column>
            <el-table-column
                    prop="majorName"
                    label="专业"
            >
            </el-table-column>
            <el-table-column
                    prop="dname"
                    label="系部"
            >
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="开始时间"
            >
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    label="结束时间"
            >
            </el-table-column>

            <el-table-column
                    prop="leaveType"
                    label="请假类型"
            >
            </el-table-column>
            <el-table-column
                    prop="reason"
                    label="请假原因"
            >
            </el-table-column>
            <el-table-column
                    label="图片"
            >
                <template v-slot:default="scope">

                    <el-image
                            :src="url+scope.row.id"
                            :preview-src-list="[url+scope.row.id]"
                            @click="vbs(url+scope.row.id)"
                            v-if="scope.row.document != null"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="90px"
            >
                <template slot-scope="scope">

                    <el-tooltip content="同意" placement="top">
                        <el-button
                                v-if="scope.row.approval && scope.row.leaveCancel"
                                @click="handleApproval(scope.row)"
                                type="success"
                                size="mini"
                                icon="el-icon-check"
                                circle
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip content="拒绝" placement="top">
                        <el-button
                                v-if="scope.row.approval && scope.row.leaveCancel"
                                @click="handleReject(scope.row)"
                                type="danger"
                                size="mini"
                                icon="el-icon-close"
                                circle
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip content="处理未销假" placement="top">
                        <el-button
                                v-if="scope.row.leaveError"
                                @click="handleException(scope.row)"
                                type="warning"
                                size="mini"
                                icon="el-icon-warning"
                                circle
                        ></el-button>
                    </el-tooltip>

                </template>
            </el-table-column>
        </el-table>
        <!-- 拒绝申请 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-form-item label="拒绝理由" prop="">
                    <el-select
                            v-model="form.refuseReason"
                            placeholder="请选择拒绝理由"
                            clearable
                            filterable
                            allow-create
                    >

                        <el-option
                                v-for="item in reson"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <p v-if="!hasReason" style="color: red">请输入拒绝理由</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formInline.pageNumber"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </div>
</template>

<script>
    import axios from "axios";
    import {Message} from "element-ui";
    import pagination from "@/components/layout/pagination";

    export default {
        name: "leave",
        created() {
            this.query();
            this.getDepts();
        },
        components: {
            pagination
        },
        methods: {
            vbs(val) {
                this.srcList = []
                this.srcList.push(val)
            },
            setPage(page) {
                this.formInline.pageSize = page.pageSize;
                this.formInline.pageNumber = page.pageNumber;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val
                this.query()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.pageNumber = val
                this.query()
            },

            getDepts() {
                axios({
                    url: this.$BASE_URL + "/leave/getLeaveList",
                    params: this.formInline,
                    headers: {
                        token: localStorage.getItem("token")
                    }
                }).then(resp => {
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list;
                        this.total = resp.data.data.total;
                    } else {
                        Message.error(resp.data.msg)
                    }

                }, err => {
                    Message.error(err.msg)
                })
            },

            query() {
                axios({
                    url: this.$BASE_URL + "/leave/getLeaveList",
                    params: this.formInline,
                    headers: {
                        token: localStorage.getItem("token")
                    }
                }).then(resp => {
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list;
                        this.total = resp.data.data.total;
                    } else {
                        Message.error(resp.data.msg)
                    }

                }, err => {
                    Message.error(err.msg)
                })
            },
            canChose(row, index) {

                return row.status == "审批中";
            },
            output() {
                axios({
                    method: 'post',
                    url: this.$BASE_URL + "/output/studentLeaveExport",
                    responseType: 'blob',
                    params: this.formInline,
                    headers: {
                        token: localStorage.getItem("token")
                    }
                }).then(resp => {
                    const {headers} = resp;
                    let blob = new Blob([resp.data], {type: headers['content-type']});
                    let objectUrl = URL.createObjectURL(blob);  //生成一个url
                    window.location.href = objectUrl;   //浏览器打开这个url
                }).catch(err => {
                    console.log(err);
                })
            },
            handleException(row) {
                this.$confirm('是否要处理?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: this.$BASE_URL + "/leave/dealLeaveTimeOutNotCancel",
                        headers: {
                            token: localStorage.getItem("token")
                        },
                        params: {
                            id: row.id
                        }
                    }).then(resp => {
                        if (resp.data.code === 200) {
                            Message.success(resp.data.msg)
                            this.query()
                        } else {
                            Message.error(resp.data.msg)
                            this.query()
                        }
                    }, err => {
                        Message.error(err.msg)
                        this.query()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            //批量审批
            handleBatchApproval(row) {
                this.$confirm('是否要批量审批?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const ids = row.id || this.ids;
                    axios({
                        method: 'post',
                        url: this.$BASE_URL + "/leave/batchAgree",
                        headers: {
                            token: localStorage.getItem("token")
                        },
                        params: {
                            ids: ids.toString()
                        }
                    }).then(resp => {
                        if (resp.data.code === 200) {
                            Message.success(resp.data.msg)
                            this.query()
                        } else {
                            Message.error(resp.data.msg)
                            this.query()
                        }
                    }, err => {
                        Message.error(err.msg)
                        this.query()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //审批
            handleApproval(row) {
                this.$confirm('是否同意请假?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios({
                        method: 'post',
                        url: this.$BASE_URL + "/leave/approvalLeave",
                        headers: {
                            token: localStorage.getItem("token")
                        },
                        params: {
                            id: id
                        }
                    }).then(resp => {
                        if (resp.data.code === 200) {
                            Message.success(resp.data.msg)
                            this.query()
                        } else {
                            Message.error(resp.data.msg)
                            this.query()
                        }
                    }, err => {
                        Message.error(err.msg)
                        this.query()
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            /** 拒绝操作 */
            handleReject(row) {
                this.form = row;
                this.open = true;
                this.title = "拒绝请假";
            },
            /** 提交按钮 */
            submitForm() {
                this.hasReason = this.form.refuseReason !== ""
                if (this.hasReason) {
                    axios({
                        url: this.$BASE_URL + "/leave/rejectApply",
                        params: this.form,
                        method: 'POST',
                        headers: {
                            token: localStorage.getItem("token")
                        }
                    }).then(resp => {
                        if (resp.data.code === 200) {
                            Message.success(resp.data.msg)
                        } else {
                            Message.error(resp.data.msg)
                        }
                        this.query()
                        this.cancel()
                    }, err => {
                        Message.error(err.msg)
                        this.query()
                        this.cancel()
                    })
                }

            },
            cancel() {
                this.open = false;
            }
        },
        data() {
            return {
                hasReason: true,
                depts: [{
                    value: "智能制造与信息工程学院"
                },
                    {
                        value: "经济与管理学院"
                    },
                    {
                        value: "师范学院"
                    },
                    {
                        value: "护理学院"
                    }, {
                        value: "临床医学院(附属医院)"
                    }, {
                        value: "基础医学院"
                    }, {
                        value: "中医与康复养生学院"
                    }

                ],
                role: localStorage.getItem("role"),
                url: this.$BASE_URL + "/leave/img?id=",
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
                ],
                total: 0,
                tableData: [],
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                //对话框弹出
                open: false,
                formInline: {
                    studentNumber: '',
                    studentName: '',
                    department: '',
                    startTime: '',
                    endTime: "",
                    status: "",
                    pageSize: 10,
                    pageNumber: 1,
                    dname: ""
                },
                form: {
                    id: '',
                    refuseReason: ''
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                options: [{
                    value: '1',
                    label: '待审批'
                }, {
                    value: '2',
                    label: '审批中'
                }, {
                    value: '3',
                    label: '拒绝'
                }, {
                    value: '4',
                    label: '撤销'
                }, {
                    value: '5',
                    label: '请假中'
                }, {
                    value: '6',
                    label: '已销假'
                }, {
                    value: '7',
                    label: '超时未审批'
                }, {
                    value: '8',
                    label: '超时未销假'
                }],
                value: '',
                reson: [
                    {
                        value: '请假材料不充分不能请假',
                        label: '请假材料不充分不能请假'
                    },
                    {
                        value: '疫情管控不能请假',
                        label: '疫情管控不能请假'
                    }
                ],
                rules: {
                    reson: [
                        {required: true, message: "请输入拒绝原因", trigger: "blur"},
                    ],

                }
            }
        }
    }
</script>
<style scoped>
</style>
